/** 
 标准券信息
*/
import React, { PureComponent } from 'react';
import { NoDataMaskC } from '../../../../comps';
import { Spin } from 'antd';
import style from './index.less';
import { connect } from 'dva';
import _ from 'lodash';
import accounting from 'accounting';

class StandardTradeC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      portfolioId: undefined, //组合id
      isPledged: '1', //1已质押 2未质押
      dataSource: undefined, //表格数据
      columns: undefined, //表头
      infoTotal: {}, //总额数据
      infoAvaliable: {}, //可用数据
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.portfolioId !== this.state.portfolioId) {
      this.setState(
        {
          portfolioId: nextProps.portfolioId,
        },
        () => {
          if (!nextProps.portfolioId) return;
          this.getTotalAsset();
          this.getAvailableAsset();
        },
      );
    }
  }

  //查询总额数据
  getTotalAsset = () => {
    const { portfolioId } = this.state;
    this.props.dispatch({
      type: 'exchangePledgeM/getTotalAsset',
      payload: {
        portfolioId,
      },
      callback: (data) => {
        if (data) {
          //成功
          this.setState({
            infoTotal: {
              0: data.sjs1,
              1: data.sjs2,
            },
          });
        } else {
          //失败
          this.setState({
            infoTotal: {},
          });
        }
      },
    });
  };

  //查询可用数据
  getAvailableAsset = () => {
    const { portfolioId } = this.state;
    this.props.dispatch({
      type: 'exchangePledgeM/getAvailableAsset',
      payload: {
        portfolioId,
      },
      callback: (data) => {
        if (data) {
          //成功
          this.setState({
            infoAvaliable: {
              0: data.ky1,
              1: data.ky2,
            },
          });
          this.props.getInfoAvaliable({
            0: data.ky1,
            1: data.ky2,
          });
        } else {
          //失败
          this.setState({
            infoAvaliable: {},
          });
          this.props.getInfoAvaliable({});
        }
      },
    });
  };

  render() {
    const { infoAvaliable, infoTotal } = this.state;
    return (
      <Spin spinning={this.props.loading.effects['exchangePledgeM/getAvailableAsset'] == true}>
        <div style={{ position: 'relative' }}>
          <div className={style.standardTrade}>
            <div>上交所(张)</div>
            <div>
              <div className={'topText'}>
                可用: {!this.props.portfolioId ? 'xxxxx' : infoAvaliable[0] === undefined ? '--' : accounting.formatNumber(Number(infoAvaliable[0]), 0)}
              </div>
              <div>总额: {!this.props.portfolioId ? 'xxxxx' : infoTotal[0] === undefined ? '--' : accounting.formatNumber(Number(infoTotal[0]), 0)}</div>
            </div>
            <div>深交所(张)</div>
            <div>
              <div className={'topText'}>
                可用: {!this.props.portfolioId ? 'xxxxx' : infoAvaliable[1] === undefined ? '--' : accounting.formatNumber(Number(infoAvaliable[1]), 0)}
              </div>
              <div>总额: {!this.props.portfolioId ? 'xxxxx' : infoTotal[1] === undefined ? '--' : accounting.formatNumber(Number(infoTotal[1]), 0)}</div>
            </div>
          </div>
          {!this.props.portfolioId ? <NoDataMaskC height={'100%'} title='请选择相对应组合，加载数据！' /> : null}
        </div>
      </Spin>
    );
  }
}
export default connect(({ exchangePledgeM, loading }) => ({ exchangePledgeM, loading }))(StandardTradeC);
